import { Button, Icon, Input, Modal, Popover, Tooltip } from "antd";
import { inject, observer } from "mobx-react";
import React from "react";
import { MainStore, detailType } from '../../../src/store/MainStore';
import { tr } from '../../i18n/tr';
import './UserSearch.less'
import SvgIcon from "../svgIcon/SvgIcon";
import { UserAdd } from "../../interface/IaddFriend";
import { CreatGroup } from "../../page/CrtGroup/CreatGroup";
import { RouteComponentProps } from "react-router-dom";
import { AvatorWithPhoto } from "../avatorWithPhoto/AvatorWithPhoto";
export interface IUserSearchProps{

}
interface WithStore  {
	mainStore:MainStore
}


@inject('mainStore', 'systemStore', 'routerStore', 'friendStore', 'createGroupStore', 'requestStore', 'chatStore')
@observer
export default class UserSearch extends React.Component<IUserSearchProps>{
	createGroupRef:any
  state = {
    showClear:false,
		menuShow:false,
		keyword:'',
		// Popover切换组件时，组件内部不刷新，增加reloadkey让组件重绘
		reloadKey:0
  };
	constructor(props:IUserSearchProps){
		super(props);
		this.createGroupRef = React.createRef()
	}

  componentDidMount(){
  }
  get injected() {
		return (this.props as unknown) as WithStore;
	}
  showClear=()=>{
		console.log('sheis11')



    this.setState({
      showClear:true 
    })
  }
  closeClear=()=>{
    this.setState({
      showClear:false 
    })
		this.injected.mainStore.changeFilterText('')
  }
  

  showAddGroupView(){

  }

	addFriend( user:UserAdd ){
		this.injected.mainStore.showAddFriendApply(user);
	}

	hidePopover(){
		this.setState({
			menuShow:false
		})
	}
	renderAddGroupModel(){
		return (
			<Modal
				visible={this.injected.mainStore.addGroupModalData.isShow }
				title="添加群组"
				footer={null}
				
				onCancel={this.injected.mainStore.closeAddGroupModal }
			>
				{/* 处理GreatGroup中AutoSizer组件没有高度问题 */}
				<div style={{ width: '100%', height: '400px' }}>
					<CreatGroup ref={this.createGroupRef} reloadKey={this.state.reloadKey}></CreatGroup>
				</div>
				
			</Modal>
		)
	}

	renderAddFriendsModel(){
		return (
			<Modal
					visible={this.injected.mainStore.addFriModalData.isShow}
					mask={false}
					centered
					title="添加好友/企业"
					destroyOnClose={true}
					width={420}
					footer={null}
					onCancel={()=>{
						this.setState({
							keyword:''
						})
						this.injected.mainStore.closeAddFriModal()
					}}
				>
					<div className="addfriend-box">
						<div className="search-wraper">
							<input
								type="text"
								placeholder="请输入手机号/ID号/公司名称"
								onChange={(e)=>{
									this.setState({
										keyword:e.target.value
									})
								}}
								value={this.state.keyword}
								maxLength={30}
							/>
							<Button onClick={() => this.injected.mainStore.searchUserFun(this.state.keyword)}>
								搜索
							</Button>
						</div>
						<div className="search-user-wraper">
							{Array.isArray(this.injected.mainStore.searchUserList) &&
								this.injected.mainStore.searchUserList.length > 0 ? (
									this.injected.mainStore.searchUserList.map((item, index) => {
										return (
											<div key={index} className="user-item">
												<span>
													<span>昵称：{item.name}</span>
													<span style={{marginLeft:'5px'}}>ID: {item.id}</span>
												</span>
												<span>
													<Icon
														type="user-add"
														style={{ fontSize: '20px' }}
														onClick={() => this.addFriend(item)}
													/> 
												</span>
											</div>
										);
									})
								) : (
									<span className="no-data">暂无搜索用户</span>
								)}
						</div>
					</div>
				</Modal>
		)
	}
	applyAddFriend = () => {
		this.injected.mainStore.applyAddfriend('');
		this.injected.mainStore.closeAddFriendApply()
		this.injected.mainStore.closeAddFriModal();
	};

  render(): React.ReactNode {
		const sendList = (
			<div className="popover-addchat">
				<div className="send-list-item" style={{ maxWidth: 'none' }} onClick={()=>{
					this.hidePopover();
					
					this.injected.mainStore.showAddGroupModal()
					this.setState({
						reloadKey:this.state.reloadKey+1
					})
					
				}}>
						<SvgIcon name="contact-addchat" size="14" />
						<span className="label">创建群聊</span>
				</div>
				<div className="send-list-item" style={{ maxWidth: 'none' }} onClick={()=>{
					this.hidePopover();
					this.injected.mainStore.showAddFriModal()
				}}>
						<SvgIcon	name="contact-adduser" size="14" />
						<span className="label">添加好友/企业</span>
				</div>
				
			</div>
		);

      return (
        <>
				<Modal
					mask={false}
					centered
					title="好友验证"
					visible={this.injected.mainStore.addFriendApplyData.isShow}
					width={340}
					okText={'确定'}
					cancelText={'取消'}
					onOk={this.applyAddFriend}
					destroyOnClose={true}
					onCancel={this.injected.mainStore.closeAddFriendApply}
				>
					<div className="addfriend-box">
						{/* <Avatar icon="user" src={this.injected.mainStore.addFriendApplyData.headUrl} /> */}
						<AvatorWithPhoto type={0} id={this.injected.mainStore.addFriendApplyData.id} size={24} />
						<span className="user-name">
							{this.injected.mainStore.addFriendApplyData.name}
							({this.injected.mainStore.addFriendApplyData.id})
						</span>
					</div>
				</Modal>
					{ this.renderAddGroupModel() }
					{ this.renderAddFriendsModel() }
					<div className="search-wraper">
						<div className="input-wrapper">
							<Input
									suffix={
										this.state.showClear ? <Icon type="close-circle" theme="filled" style={{ color: '#8CA6F5' }} onClick={this.closeClear} /> : null
									}
									size={"default"}
									onFocus={this.showClear}
									placeholder="搜索联系人、群组等"
									maxLength={30}
									prefix={<SvgIcon size="12" name="search" color="#4690ff"></SvgIcon>}
									value={this.injected.mainStore.filterTxt}
									onChange={(e) => { this.injected.mainStore.changeFilterText(e.target.value); }}
									className="custom-input"
								/>
						</div>
						<Popover
								placement="bottomLeft"
								//title={this.injected.systemStore.nickname}
								content={sendList}
								trigger="click"
								visible={this.state.menuShow}
								onVisibleChange={()=>{
									
									this.setState({
										menuShow:!this.state.menuShow
									},()=>{
										if( this.createGroupRef.current && this.createGroupRef.current.clearConfirm){
											this.createGroupRef.current.clearConfirm();
										}
									})
								}}
							>
								<div className="btn-add"><SvgIcon size="12" name="group-add"></SvgIcon></div>
							</Popover>
						{/* <Tooltip title="添加">
							
							
						</Tooltip> */}
						{/* <Tooltip title={tr(171)}> 
							<Icon type="user-add" style={{ color: '#D8E1FF', fontSize: '22px' }} onClick={() => this.injected.mainStore.showAddFriModal()} />
		
						</Tooltip>
						<Tooltip title={tr(43)}> 
							<Icon
								type="usergroup-add"
								style={{ color: '#D8E1FF', fontSize: '22px' }}
								onClick={this.showAddGroupView}
							/>
						</Tooltip> */}
					</div>
					
        </>
        
      )
  }
}
